//引入路由的api
import { createRouter, createWebHashHistory } from 'vue-router'

import layout from '@/layout/index.vue'

const login = () => import("@/views/login/index.vue")
const PersonalIndex = () => import("@/views/personal/Index.vue")
const PersonalMessage = () => import("@/views/personal/Message.vue")
const AppIndex = () => import("@/views/app/Index.vue")

const NotFound = () => ("@/views/404.vue")


//引入页面
const Home = () => import("../views/Home.vue")
const About = () => import("../views/About.vue")

const UserCenter = () => import("../views/user-center/index.vue")

const VuexPage = () => import("../views/Vuex.vue")

//引入elementTest页面
const ElementTest = () => import("../views/ElemntTest.vue")

//引入列表及分页
const ListDemo = () => import("../views/ListDemo.vue")

// const TpForm =()=>import("../views/TpForm.vue")
const CheckForm = () => import("../views/CheckForm.vue")

//引入Register
const Register = () => import("../views/Register.vue")

//引入AccountList页
const AccountList = () => import("../views/AccountList.vue")


//配置路由

const routeConfig = [
    {
        path: '/',
        redirect: '/home',
        component: layout,
        children: [
            //登录页
            {
            path: 'login',
            name: 'login',
            component: login
        },
        //个人中心页
        {
            path:'personal',
            name:'Personal',
            component:PersonalIndex,
            children:[{
                path:'message',
                name:'PersonalMessage',
                component:PersonalMessage
            }]
        },
        //App内部页
        {
            path:'app',
            name:'App',
            component:NotFound
        }
        ]
    },
    {
        path:'/:pathMatch(.*)*',
        name:'404',
        redirect:'/404'
    },


// const routeConfig = [
//     { path: '/', redirect: '/home' },

//     //配置AccountList路由
//     {
//         path: '/account-list',
//         name: 'accountList',
//         component: AccountList
//     },


    //ElementTest 路由配置
    { path: '/element', name: 'element', component: ElementTest },

    //ListDemo路由配置
    {
        path: '/list-demo',
        name: 'listDemo',
        component: ListDemo
    },
    //TpForm 路由配置
    // {path:'/tpForm',name:'tpForm',component:TpForm},
    //CheckForm 路由配置
    { path: '/checkForm', name: 'checkForm', component: CheckForm },

    //Register 路由配置
    { path: '/register', name: 'register', component: Register },


    { path: '/home', name: 'home', component: Home },
    { path: '/about', name: 'about', component: About },
    {
        path: '/user',
        name: 'userCenter',
        component: UserCenter
    },


    { path: '/vuex', name: 'vuex', component: VuexPage },

]

//创建实例化路由
const router = createRouter({

    history: createWebHashHistory(),
    routes: routeConfig
})

//对外暴露实例化路由对象
export default router